<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx}/res/css/main.css?v=2">
    <link rel="stylesheet" href="${ctx}/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx}/res/css/detail.css?v=2">
    <link rel="stylesheet" href="${ctx}/res/css/style.css">
    <link rel="stylesheet" href="${ctx}/res/hplus/css/drift-basic.css">
    <link rel="stylesheet" href="${ctx}/res/hplus/css/luminous-basic.css">
    <script type="text/javascript" src="${ctx}/res/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/res/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/res/js/jquery.scrollLoading.js"></script>
   <script type="text/javascript" src="${ctx}/res/hplus/js/Drift.min.js"></script>
   <script type="text/javascript" src="${ctx}/res/hplus/js/Luminous.min.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
		  $(".scrollLoading2 img").lazyload({effect: "fadeIn"});
		  $(".scrollLoading3 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <style>
    .layui-layer-dialog .layui-layer-content {
		color:black;
	}

.detail_pic .hd li {
    width: 92px;
    padding-top: 4px;
    text-align: center;
    cursor: pointer;
    float: left;
}

.disabled {
	cursor:not-allowed;
	color:#999;
}

.disabled a {
	cursor:not-allowed;
	color:#999;
}

	.detail {
		  	
		} 
		
	.closing{
		width:250px;text-align:center;color:#fff;background:#cccccc;font-size:18px;
		cursor:not-allowed;
		line-height: 40px; 
		height: 40px;
		float:left;
		}
    </style>
    <title>软装到家</title>
</head>
<body>
 <%@include file="../head.jsp" %>
 <!--产品信息-->
<div class="p-item-grid w-1200 margin-0-auto clear">
	<div class="p-item-preview">
    	<div class="detail_pic scrollLoading1">
            <div class="bd">
                <ul id="bd_imgs">
	                <c:choose>
                  		<c:when test="${p.defaultSpec.specImages != null && fn:length(p.defaultSpec.specImages) > 0 }">
                  			<c:forEach items="${p.defaultSpec.specImages }" var="sig" varStatus="ssig">
		              			<li data-value="${si.id }" href="${sig}"><div class="pic"><img data-original="${sig }"></div></li>
		              		</c:forEach>
                  		</c:when>
                  		<c:otherwise>
                  			<li data-value="${p.id }" href="${sig}"><div class="pic"><img data-original="${p.headImage }"></div></li>
                  		</c:otherwise>
                  	</c:choose>
                </ul>
            </div>
            <div class="hd">
                <a class="sPrev" ></a><a class="sNext" ></a>
                <ul id="hd_imgs">
                	<c:choose>
                  		<c:when test="${p.defaultSpec.specImages != null && fn:length(p.defaultSpec.specImages) > 0 }">
                  			<c:forEach items="${p.defaultSpec.specImages }" var="sig" varStatus="ssig">
			               		<li data-value="${si.id }"><img data-original="${sig }"></li>
		               		</c:forEach>
                  		</c:when>
                  		<c:otherwise>
                  			<li data-value="${p.id }"><img data-original="${p.headImage }"></li>
                  		</c:otherwise>
                  	</c:choose>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
			jQuery(".detail_pic").slide({ mainCell:".bd ul", effect:"fold", autoPlay:true,delayTime:200,triggerEvent:true,});
			jQuery(".hd").slide({ mainCell:"ul",delayTime:100,vis:4,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext",triggerEvent:true, });	
			//$("#bd_imgs li img").jzoom({bgColor: "#222"});
		</script>
	</div>
	<!--产品信息-->
	<input type="hidden" id="productId" name="productId" value="${p.id }"/>
	<input type="hidden" id="specificationId" name="productId" value="${p.defaultSpec.id }"/>
	<div class="p-item-inner detail" id="detailDiv" style="height:500px;">
        <div class="item_title">
            <h1>${p.name }</h1>
            <span class="hl_head">${p.subTitle }</span>
        </div>
        <div class="item-summary">
        	<!-- <div class="summary-comment">
                <div class="comment-count">
                	<a class="count" href="#">17</a>
                    <p class="comment">累计评价</p>
                </div>
            </div> -->
            <div class="summary-success" style="margin-top:15px;">
                <div class="comment-count">
                	<a class="count" href="#">${p.totalSold }</a>
                    <p class="comment">交易成功</p>
                </div>
            </div>
        	<%-- <div class="item-price">
        		<div class="item-dt">价格</div>
        		<div class="item-dd" style="text-decoration: line-through" id="sellPrice">￥<fmt:formatNumber value="${p.minPrice*1.2 }" type="currency" pattern="0.00"/> </div>
        	</div> --%>
        	<div class="item-price" style="margin-top:30px;">
        		<div class="item-dt">价格</div>
        		<div class="item-dd">
        			<strong class="item-price-red" id="realPrice">￥<fmt:formatNumber value="${p.defaultSpec.realPrice}" type="currency" pattern="0.00"/></strong>
        			<!-- <a class="item-customized">独家定制</a> -->
        		</div>
        	</div>
        </div>
        <div class="item-choose">
        	<div class="choose-option">
        		<div class="dt" style="line-height:26px">颜色</div>
            	<div class="dd" id="spec2">
	            	<c:forEach items="${specs[1] }" var="cs" varStatus="css">
	            	<div class='item-option <c:if test="${cs.specDefault }">selected</c:if>' data-spec="s${css.index}" onclick="switchSpec(this)" data-info="${cs.idsInfo }">
	            		<a href="javascript:;">${cs.showName }</a>
	            	</div>
	            	</c:forEach>
	            </div>
        	</div>
        	<div class="blank10"></div>
        	<div class="choose-option">
        		<div class="dt">规格</div>
	            <div class="dd" id="spec1">
	            	<c:forEach items="${specs[0] }" var="ss" varStatus="sss">
	            	<div class='item-option <c:if test="${ss.specDefault }">selected</c:if>' data-spec="s${sss.index}" onclick="switchSpec(this)" data-info="${ss.idsInfo }">
	            		<a href="javascript:;">${ss.showName }</a>
	            	</div>
	            	</c:forEach>
	            </div>
        	</div>
        	<div class="choose-option">
	        	<div class="dt" style=" line-height:41px">数量</div>
	            <div class="dd">
                        <div class="wrap-input">
                            <div class="gw_num">
                                <em class="jian">-</em>
                                <input type="text" value="1" id="buy-num" class="num"/>
                                <em class="add">+</em>
                            </div>
                        </div>
                    <c:if test="${logined }">
	                    <c:choose>
	                    	<c:when test="${p.sellingStatus == 0 }">
	                    		<a class="btn-append" style="cursor:pointer;" id="product_add">加入购物车</a>
	                    	</c:when>
	                    	<c:otherwise>
	                    		<div class="closing">该产品已下架，无法购买</div>
	                    	</c:otherwise>
	                    </c:choose>
                    </c:if>
                    <c:if test="${not logined }">
                    <a class="btn-append" style="cursor:pointer;" href="${ctx }/user/login">加入购物车</a>
                    </c:if>
	            </div>
        	</div>
        	<!-- <div class="choose-option service-wrap">
	        	<div class="dt">服务承诺</div>
	            <div class="dd">
	            	<div class="service-list">
                        <a class="icon-jin">金牌卖家</a>
                        <a class="icon-fu">优质服务</a>
                        <a class="icon-xian">运费险</a>
                    </div>
	            </div>
        	</div> -->
        </div>
	</div>
	<script type="text/javascript">
	$("#bd_imgs li").each(function() {
		//jQuery(this).jzoom({bgColor: "#222"});
		new Drift(this, {
				paneContainer: document.querySelector('.detail'),
			    inlinePane: 900,
			    inlineOffsetY: -85,
			    containInline: true,
			    sourceAttribute: 'href' 
			});
		//new Luminous(this);  
	});
	</script>
	<div class="p-item-ext">
		<div class="extInfo">
            <div class="brand-logo">
		        <a href="${ctx}/product/list?brandInfo=${p.brand.id }" target="_blank" title="点击查看该厂家产品列表">
		            <img src="${p.brand.image }" width="100" title="${p.user.realName }" title="点击查看该厂家产品列表">
		        </a>
		    </div>
        	<div class="seller-btns">
                <a class="btn-share" href="#" target="_blank" title="${p.user.realName }"><span>分享</span></a>
                <a class="btn-collect" onclick="collect(${p.id});" title="${p.user.realName }"><span>收藏</span></a>
    		</div>
    		<div class="seller-score-box">
            	<div class="seller-txt">工厂：${factoryInfo.companyName }<br>规模：500-1000人</div>
                <div class="seller-btn"><a href="#">工厂监控</a></div>
           </div>
           <div class="seller-contact">
           		<div class="contact-header">
           		<!-- <a href="http://wpa.qq.com/msgrd?V=1&Uin=441868461&Menu=no" target="_blank">联系卖家</a> -->
           		<c:choose>
           			<c:when test="${p.user.QQ == null || p.user.QQ == '' }">
           				<a href="tencent://message/?uin=3448878138" target="_blank">联系卖家</a>
           			</c:when>
           			<c:otherwise>
           				<a href="tencent://message/?uin=${p.user.QQ }" target="_blank">联系卖家</a>
           			</c:otherwise>
           		</c:choose>
           		</div>
           		<%-- <div class="contact-code"><img src="${ctx}/res/img/other/seller-code.jpg"/></div>
           		<div class="contact-text">产品二维码</div> --%>
           </div>
        </div>
    </div>
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="w-1200 margin-0-auto clear">
	<div class="detailTab scrollLoading2">
        <div class="hd">
            <ul><li style="border-left:none">订单组合</li><li>商品详情</li><!-- <li>累积评论<em>17</em></li> --><li>品牌视频介绍</li><li>展厅游走</li></ul>
        </div>
        <div class="bd">
        	<div class="tab-list-content">
                <ul class="product-list" id="product_group">
                    <li value="${p1.id }" spec="${p1.firstSpec.id }">
                        <a href="${ctx }/product/detail?id=${p1.id}">
                            <img data-original="${p1.headImage }">
                            <p class="name">${p1.name }</p>
                            <p class="price">
                                <span>￥ <fmt:formatNumber value="${p1.firstSpec.realPrice }" type="currency" pattern="0.00"/></span>  
                                <del class="fr">已售：${p1.totalSold}</del>
                            </p>
                        </a>
                    </li>
                    <li class="list-addbtn"></li>
                    <li value="${p2.id }" spec="${p2.firstSpec.id }">
                        <a href="${ctx }/product/detail?id=${p2.id}">
                            <img data-original="${p2.headImage }">
                            <p class="name">${p2.name }</p>
                            <p class="price">
                                <span>￥ <fmt:formatNumber value="${p2.firstSpec.realPrice }" type="currency" pattern="0.00"/></span>  
                                <del class="fr">已售：${p2.totalSold }</del>
                            </p>
                        </a>
                    </li>
                </ul>
                <div class="collections-box">
                    <span class="collections-text">2件商品搭配总价：</span>
                    <span class="collections-price">￥<fmt:formatNumber value="${p1.firstSpec.realPrice + p2.firstSpec.realPrice - 100}" type="currency" pattern="0.00"/></span>
                    <c:if test="${logined }">
                    <a class="btn-append" id="group_add">加入购物车</a>
                    </c:if>
                    <c:if test="${not logined }">
                    <a class="btn-append" href="${ctx }/user/login">加入购物车</a>
                    </c:if>
                </div>
            </div>
            <div>
            	<style>
            		.xx li {
            			float: left;
            			width: 45%;
            		}
            		.xx li label {
            			font-size: 12px;
            			color: #ccc;
            			width: 30%;
            		}
            		.xx li span {
            			font-size: 12px;
            			color: #bbb;
            		}
            	</style>
            	<div class="tab-list-content sku-list clear" style="display: block;">
					<c:forEach items="${p.specifications }" var="sf">
					<ul class="skus" id="pp-${sf.id }" style='<c:if test="${sf.id != p.defaultSpec.id }">display:none;</c:if>'>
						<li>
							<label for="">欧工编码:</label>
							<span>${sf.ogCode }</span>
						</li>
						<li>
							<label for="">工厂编码:</label>
							<span>${sf.factoryCode }</span>
						</li>
						<c:forEach items="${sf.productProperties }" var="pp">
						<li>
							<label for="">${pp.name }:</label>
							<span><a href="javascript:void(0);" title="${pp.value }" style="cursor: default;">${pp.value }</a></span>
						</li>
						</c:forEach>
					</ul>      
            		</c:forEach>  
            	</div>
            ${p.details }
            </div>
           <!--  <div>累积评论</div> -->
            <div class="video">
            <c:if test="${f.videourl != null }"> 
            	<embed src='${f.videourl}' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
            </c:if>
            </div>
            <div class="video">
            	<c:choose>
            		<c:when test="${p.brand.senceTravel == null || p.brand.senceTravel == '' }">
            			<iframe height=450 width=100% src='http://www.80ck.cn/show/?m=6a7NgxHyHzd' frameborder=0 'allowfullscreen'></iframe>
            		</c:when>
            		<c:otherwise>
            			<iframe height=450 width=100% src='${p.brand.senceTravel }' frameborder=0 'allowfullscreen'></iframe>
            		</c:otherwise>
            	</c:choose>
            </div>
        </div>
</div>
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<!--同品牌商品-->
<div class="w-1200 margin-0-auto">
    <div class="detailTab scrollLoading3">
        <div class="hd">
            <ul><li style="border-left:none">同品牌商品</li><li>同类商品</li><li>推荐方案</li></ul>
        </div>
        <div class="bd">
            <div class="picLeftLoop">
                <a class="sPrev"></a>
                <div class="bd">
                    <ul>
                       <c:forEach items="${sameBrandProducts }" var="p">
                      	<li>
                            <a href="${ctx }/product/detail?id=${p.id}"><img data-original="${p.headImage }" /></a>
                            <div class="title"><a href="#">${p.name }</a></div>
                            <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/><span class="fr">已售：${p.totalSold }</span></div>
                       	</li>
                       </c:forEach>
                    </ul>
                </div>
                <a class="sNext"></a>
            </div>
            <div class="picLeftLoop">
                <a class="sPrev"></a>
                <div class="bd">
                    <ul>
                        <c:forEach items="${sameCategoryProducts }" var="p">
                      	<li>
                            <a href="${ctx }/product/detail?id=${p.id}"><img data-original="${p.headImage }" /></a>
                            <div class="title"><a href="#">${p.name }</a></div>
                            <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/><span class="fr">已售：${p.totalSold }</span></div>
                       	</li>
                       </c:forEach>
                    </ul>
                </div>
                <a class="sNext"></a>
            </div>
            <div>
            	<!-- <p><img src="http://7xjd68.com1.z0.glb.clouddn.com/1af5b723-01f1-4975-b20c-4d0d5033a031" style="width: 100%; float: none;"></p><p><br></p><p><img src="http://7xjd68.com1.z0.glb.clouddn.com/d5a7f124-0257-4f3a-a140-49bc8e5f4a38" style="width: 100%; float: none;"></p><p><br></p><p><img src="http://7xjd68.com1.z0.glb.clouddn.com/4b259941-62b1-42cc-851a-12992f60e602" style="width: 100%; float: none;"></p><p><br></p><p><img src="http://7xjd68.com1.z0.glb.clouddn.com/c295ca60-60ee-4ddf-9c97-f7aa071c5063" style="width: 100%; float: none;"></p><p><br></p><p><img src="http://7xjd68.com1.z0.glb.clouddn.com/163217ec-f729-4ca0-96ab-a364f6121616" style="width: 100%; float: none;"><br></p> -->
            	<%-- <c:choose>
            		<c:when test="${p.brand.view3dURL == null || p.brand.view3dURL == '' }">
            			<iframe height=450 width=100% src='http://rzds.admin.3vjia.com/PMC/Panorama/Show360Test.aspx?SchemeId=01840492' frameborder=0 'allowfullscreen'></iframe>
            		</c:when>
            		<c:otherwise>
            		</c:otherwise>
            	</c:choose> --%>
            			<div class="model_show" style="margin: 20px; margin-left: 280px;">
	            			<%-- <a class="btn btn-default btn-primary" href="${p.brand.view3dURL }" target="_blank">点击前往</a> --%>
	            			<div class="pic">
	            				<c:choose>
		            				<c:when test="${p.brand.view3dImage != null && p.brand.view3dImage != '' }">
		            					<img src="${p.brand.view3dImage }">
		            				</c:when>
		            				<c:otherwise>
		            					<img src="http://7xjd68.com1.z0.glb.clouddn.com/7b324859-68f4-4ae3-a63f-224c1b160400">
		            				</c:otherwise>
	            				</c:choose>
					            <div class="qj" style="margin-top: 20px;">
					                <a href="${p.brand.view3dURL }" target="_blank"><strong>3D</strong>实景</a>
					            </div>
					        </div>
            			</div>
            </div>
            <%-- <div class="picLeftLoop modelLeftLoop">
                <a class="sPrev"></a>
                <div class="bd scrollLoading1">
	                <ul>
		            	<c:forEach items="${designs }" var="d" varStatus="ds">
		            	<li style="width:260px;">
		                    <div class="img" style="cursor:pointer;"><img data-original="${d.headImage }" onclick="javascript:location='${ctx }/design/detail?id=${d.id}'"><a class="btn" onclick="orderDesigner(${d.designer.id});">一键预约</a></div>
		                    <div class="portrait" style="cursor:pointer;">
		                        <div class="portrait_bg" onclick="javascript:location='${ctx }/design/designer?id=${d.designer.id}'"><img src="${d.user.headImage }"></div>
		                        <div class="tit" onclick="javascript:location='${ctx }/design/designer?id=${d.designer.id}'">${d.user.realName }</div>
		                    </div>
		                    <div class="tr"><h1>${d.title }</h1>
		                        <p>${d.theme }</p></div>
		                </li>
		            	</c:forEach>
		            </ul>
                </div>
                <a class="sNext"></a>
                --%>
            </div>
        </div>
    </div>
<script type="text/javascript">jQuery(".picLeftLoop").slide({ mainCell:".bd ul",effect:"leftLoop",vis:5,autoPlay:"true",prevCell:".sPrev",nextCell:".sNext",triggerEvent:true});</script>
<script type="text/javascript">jQuery(".detailTab").slide({trigger:"click",triggerEvent:true});</script>

<!--同品牌商品 END-->

<div class="w-1200 margin-0-auto clear">
	<div class="tab-list-title">
		<ul class="tab-list">
			<li class="on">推荐产品</li>
		</ul>
	</div>
    <div class="picLeftLoop">
    	<div class="bd" style="width:100%; margin-left:35px">
            <ul>
            	<c:forEach items="${recProducts }" var="p">
                <li>
                    <a href="${ctx }/product/detail?id=${p.id}"><img class="scrollLoading" data-original="${p.headImage }" /></a>
                    <div class="title"><a href="#">${p.name }</a></div>
                    <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/></div>
                    <div class="fl" style="color:#888">已售：${p.totalSold }</div>
                </li>
                </c:forEach>
            </ul>
    	</div>
    </div>
</div>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var thumbs = $('.thumb-slider li').length;
        var thumbWidth = 73;
        var currentIndex = 0;
        $('.thumb-slider').width(thumbWidth * thumbs);
        $('.arraw-left').click(function(){
        	if(currentIndex == 0)return;
        	var width = thumbWidth * (currentIndex - 1);
        	$('.thumb-slider').animate({"left":-width + 'px'}, 300);
        	currentIndex -= 1;
        });
        $('.arraw-right').click(function(){
        	if(currentIndex == (thumbs-5))return;
        	var width = thumbWidth * (currentIndex + 1);
        	$('.thumb-slider').animate({"left":-width + 'px'}, 300);
        	currentIndex += 1;
        });
        $('.thumb-slider li').click(function(){
        	$('.thumb-slider li.active').removeClass('active');
        	$(this).addClass('active');
        	var image = $(this).find('img').attr('src');
        	$('#previewImage').attr('src', image);
        });
        $('#product_add').click(function() {   //添加至购物车
        	var productId = $('#productId').val();
        	var quantity = $('#buy-num').val();
        	var specificationId = $('#specificationId').val();
        	var json = {};
        	json["productId"] = productId;
        	json["quantity"] = quantity;
        	json["specificationId"] = specificationId;
        	$.ajax({
        		url: "${ctx}/cart/addCart",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				//loading带文字
        				layer.msg('购物车添加成功!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
        				try{
        					getCartCount();
        				} catch(e){}
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
        });
        $('#group_add').click(function() {   //组合添加至购物车
        	var groups = $('#product_group li');
        	var cartInfo = '';
        	for(var i = 0; i < groups.length;i ++ ) {
        		var p = $(groups[i]);
        		if(p.attr("value")) {
        			cartInfo += p.attr("value")+"-"+p.attr("spec")+"-1,";
        		}
        	}
        	$.ajax({
        		url: "${ctx}/cart/addGroupCarts",
        		data:"cartInfo="+cartInfo,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				//loading带文字
        				layer.msg('组合添加购物车成功!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
        				try{
        					getCartCount();
        				} catch(e){}
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
        });
    }); 
    
$(document).ready(function(){
	//加的效果
	$(".add").click(function(){
	var n=$(this).prev().val();
	var num=parseInt(n)+1;
	if(num==0){ return;}
	$(this).prev().val(num);
	});
	//减的效果
	$(".jian").click(function(){
	var n=$(this).next().val();
	var num=parseInt(n)-1;
	if(num==0){ return}
	$(this).next().val(num);
	});
})	

$(document).ready(function() {
	//initSpec();
	//switchSpec($('div[data-spec=s0]'));
	/* var specs = $('#spec1 div[data-spec^=s]');
	var defaultSpecId = '${p.defaultSpec.id}';
	if(specs == null || specs.length == 0) {
		switchSpec($('div[data-spec=s0]'));
	} else {
		for(var i = 0;i < specs.length;i ++ ) {
			var theSpec = specs[i];
			var specId = $(theSpec).attr('data-id');
			if(specId == defaultSpecId) {
				switchSpec(theSpec);
				break;
			}
		}
	} */
	var specs = $('#spec2 .selected');   //以颜色作为首选
	var sizeSpecs = $('#spec1 div.item-option');
	setDisabled(specs,sizeSpecs);
	
	/* var sizeChoosen = $('#spec1 .selected');   //规格也要处理
	var colorSpecs = $('#spec2 div.item-option');
	setDisabled(sizeChoosen,colorSpecs); */
});

function setDisabled(choosen,other) {
	var dataInfo = $(choosen[0]).attr("data-info");
	var colorArr = getArrFromData(dataInfo);
	for(var i = 0;i < other.length;i ++ ) {
		var theSpec = other[i];
		var sizeInfo = $(theSpec).attr("data-info");
		var sizeArr = getArrFromData(sizeInfo);
		var hasFind = false;
		for(var j = 0;j < colorArr.length;j ++ ) {
			var colorValue = colorArr[j];
			var isFind = false;
			for(var k = 0;k < sizeArr.length;k ++ ) {
				var sizeValue = sizeArr[k];
				if(colorValue == sizeValue) {
					isFind = true;
					break;
				}
			}
			if(!isFind) {
				continue;
			} else {
				hasFind = true;
				break;
			}
		}
		if(!hasFind) {
			$(theSpec).addClass('disabled');
		}
	}
}

function getArrFromData(data) {
	var arr = new Array();
	var datas = data.split('|');
	var index = 0;
	for(var i = 0;i < datas.length;i ++ ) {
		var theData = datas[i];
		if(theData != null && theData != '') {
			arr[index++] = theData;
		}
	}
	return arr;
}

function initSpec() {
	$('#spec1 div.item-option').removeClass('selected');
	$('#spec2 div.item-option').removeClass('selected');
	$('ul.xx').hide();
}

function switchSpec(div) {
	if(!$(div).hasClass('disabled')) {
		$(div).parent().find('div.item-option').removeClass('selected');
		$(div).addClass('selected');
		var colorChoosen = $('#spec2 div.selected');
		var sizeChoosen = $('#spec1 div.selected');
		var specId = '${p.defaultSpec.id}';
		var colorArr = getArrFromData($(colorChoosen[0]).attr("data-info"));
		var sizeArr = getArrFromData($(sizeChoosen[0]).attr("data-info"));
		for(var i = 0;i < colorArr.length;i ++ ) {
			var colorid = colorArr[i];
			var flag = false;
			for(var j = 0;j < sizeArr.length;j ++ ) {
				var sizeid = sizeArr[j];
				if(colorid == sizeid) {
					location = '${ctx}/product/detail?id=${p.id}&specificationId='+colorid;
					return;
				}
			}
		}
		var sizeSpecs = $('#spec1 div.item-option');
		for(var k = 0;k < sizeSpecs.length;k ++ ) {
			var theSize = $(sizeSpecs[k]);
			var theSizeArr = getArrFromData(theSize.attr("data-info"));
			for(var i = 0;i < colorArr.length;i ++ ) {
				var colorid = colorArr[i];
				for(var l = 0;l < theSizeArr.length;l ++ ) {
					var theData = theSizeArr[l];
					if(colorid == theData) {
						location = '${ctx}/product/detail?id=${p.id}&specificationId='+colorid;
						return;
					}
				}
			}
		}
	}
}

</script>
</body>
</html>
